<template>
  <div>
    <el-dialog
      title="添加角色"
      :visible.sync="isshow"
      width="500px"
      :before-close="cancel"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="角色名称"
          prop="roleName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.roleName"
            autocomplete="off"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="权限字符"
          prop="roleKey"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.roleKey"
            autocomplete="off"
            placeholder="请输入权限字符"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="排序"
          prop="roleSort"
          :label-width="formLabelWidth"
        >
          <el-input-number
            v-model="form.roleSort"
            controls-position="right"
            @change="handleChange"
            :min="0"
            :max="10"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单权限" :label-width="formLabelWidth">
          <el-checkbox-group v-model="trees" @change="group">
            <el-checkbox label="展开/折叠" name="type"></el-checkbox>
            <el-checkbox label="全选/全不选" name="type"></el-checkbox>
            <el-checkbox label="父子联动" name="type"></el-checkbox>
          </el-checkbox-group>
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="refTree"
            :default-expanded-keys="expanded"
            :default-checked-keys="checked"
            :check-strictly="!form.menuCheckStrictly"
            :props="defaultProps"
          ></el-tree>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  menuTreeselectApi,
  roleIdApi,
  roleMenuTreeselectApi,
  addRoleApi,
  editRoleApi,
} from "@/API/indexwei";
export default {
  props: {
    isshow: {
      type: Boolean,
      default: false,
    },
    isid: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      formLabelWidth: "120px",
      form: {
        roleName: "",
        roleKey: "",
        roleSort: 0,
        status: "0",
        menuIds: [], //获取选中id的数组
        menuCheckStrictly: true, //是否父子关联
        deptCheckStrictly: true,
        remark: "",
      },
      roleId: [],
      //   请求菜单树数据
      treeData: [],
      //   是否展开
      expanded: [],
      //   是否全选
      checked: [],
      //   是否关联
      strictly: false,
      defaultProps: {
        children: "children",
        id: "id",
        label: "label",
      },
      trees: ["父子联动"],
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        roleKey: [
          { required: true, message: "权限字符不能为空", trigger: "blur" },
        ],
        roleSort: [{ required: true, trigger: "blur" }],
      },
    };
  },

  methods: {
    // 点击确定或者取消
    choose(val) {
      this.$emit("retu", val);
    },
    // 计数器事件
    handleChange(value) {
      console.log(value);
      this.form.roleSort = value;
    },
    fn() {
      // this.expanded = [];
    },
    group() {
      if (this.trees.includes("展开/折叠")) {
        console.log(this.$refs.refTree);
        // this.expandall = true;
        this.expanded = this.treeData.map((item) => item.id);
      } else {
        // this.expanded = [];
        // this.expandall = false;
        this.$refs.refTree.setChecked([]);
        // console.log(this.$refs.refTree.setCurrentKey());
        // console.log(this.$refs.refTree.store.nodesMap);
      }
      if (this.trees.includes("全选/全不选")) {
        this.checked = this.treeData.map((item) => item.id);
        console.log(this.$refs.refTree.children);
        // 全选的所有id
        this.$refs.refTree.children.forEach((item) => {
          this.form.menuIds.push(item.id);
          if (item.children) {
            item.children.forEach((items) => {
              this.form.menuIds.push(items.id);
              if (items.children) {
                items.children.forEach((itemss) => {
                  this.form.menuIds.push(itemss.id);
                  if (itemss.children) {
                    itemss.children.forEach((itemsss) =>
                      this.form.menuIds.push(itemsss.id)
                    );
                  }
                });
              }
            });
          }
        });
      } else {
        this.$refs.refTree.setCheckedKeys([]);
        this.form.menuIds = [];
      }
      if (this.trees.includes("父子联动")) {
        this.form.menuCheckStrictly = true;
        console.log(this.$refs.refTree); //.getCurrentKey()
      } else {
        this.form.menuCheckStrictly = false;
      }
    },

    // 点击取消
    cancel() {
      this.choose(false);
    },
    // 点击确定
    submitFn() {
      if (this.isid == 0) {
        addRoleApi(this.form).then((res) => {
          // console.log(res);
          this.choose(true);
        });
      } else {
        editRoleApi({ ...this.form, roleId: this.isid }).then((res) => {
          // console.log(res);
          this.choose(true);
        });
      }
    },
  },
  watch: {
    isid: {
      handler(oldValue, newVal) {
        console.log(oldValue);
        if (oldValue !== 0) {
          roleIdApi(this.isid).then((res) => {
            console.log(res);
            Object.assign(this.form, res.data);
          });
          roleMenuTreeselectApi(this.isid).then((res) => {
            this.checked = this.treeData
              .map((item) => item.id)
              .find((items) => res.checkedKeys.includes(items));
            this.form.menuIds = res.checkedKeys;
          });
        }
      },
    },
  },
  created() {
    menuTreeselectApi().then((res) => {
      console.log(res);
      this.treeData = res.data;
    });
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-tree {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #fff none;
  border-radius: 4px;
}
</style>